<template>
  <view class="shop-cart" :class="themeName">
    <view class="main">
      <!-- 有效商品 -->
      <block v-if="isLogin && activeLists.length != 0">
        <view class="cart-header">
          <span> 共{{ activeLists.length }}件商品 </span>
          <span v-if="admin" @click="admin = !admin"> 管理 </span>
          <span v-else @click="admin = !admin"> 完成 </span>
        </view>
        <view class="goods-container">
          <block v-for="(item, index) in activeLists" :key="index">
            <u-swipe-action
              :index="index"
              :options="option"
              @open="handleactionOpen"
              @click="handleactionClick"
              :show="activeIndex == item.id"
            >
              <!-- 商品卡片 -->
              <view class="cart-list" style="width: 100%">
                <view class="cart-item bg-white flex">
                  <!-- 商品头部 -->
                  <view class="row-between flex select">
                    <u-checkbox
                      v-if="admin"
                      label-size="28rpx"
                      :active-color="themeColor"
                      v-model="item.selected"
                      @change="changeGoodsStatus(item.selected, item.id)"
                      :label-disabled="false"
                      shape="circle"
                      :disabled="
                        item.sku_is_delete == 1 || item.sku_stock_none == 1
                      "
                    >
                    </u-checkbox>
                    <u-checkbox
                      v-else
                      label-size="28rpx"
                      :active-color="themeColor"
                      v-model="item.adminCheck"
                      :label-disabled="false"
                      shape="circle"
                      @change="adminGoodsStatus"
                    >
                    </u-checkbox>
                  </view>
                  <!-- 商品的主内容 -->
                  <router-link
                    :to="`/pages/goods_detail/goods_detail?id=${item.goods_id}`"
                    style="width: 100%"
                  >
                    <view
                      class="flex"
                      :style="{ padding: '20rpx', width: '100%' }"
                    >
                      <u-image
                        width="180rpx"
                        height="180rpx"
                        :src="item.goods.image"
                      />
                      <view class="m-l-20" style="flex: 1">
                        <view class="line-2 nr">{{ item.goods.name }}</view>
                        <block
                          v-if="
                            item.sku_is_delete == 0 && item.sku_stock_none == 0
                          "
                        >
                          <view class="muted xs line-2 m-t-10">
                            {{ item.goods_item.spec_value_str }}
                          </view>
                          <view class="row-between flex m-t-20">
                            <view class="price flex primary">
                              <price
                                :content="item.goods_item.sell_price"
                                :color="themeColor"
                                mainSize="36rpx"
                                minorSize="28rpx"
                              ></price>
                            </view>
                            <view class="cartNum" @tap.stop="">
                              <u-number-box
                                :disabled="item.cart_status != 0"
                                v-model="item.goods_num"
                                :min="1"
                                async-change
                                positiveInteger
                                @change="countChange($event, item.id)"
                              />
                            </view>
                          </view>
                        </block>
                        <block v-else>
                          <view
                            class="flex row-between"
                            style="margin-top: 80rpx"
                          >
                            <view> 请重新选择商品规格 </view>
                            <!-- <router-link
                              :to="`/pages/goods_detail/goods_detail?id=${item.goods_id}&cart_id=${item.id}&reCheck=1`"
                            > -->
                            <view
                              class="change-sku"
                              @tap.stop="handlereCheck(item.goods_id, item.id)"
                              >重选</view
                            >
                            <!-- </router-link> -->
                          </view>
                        </block>
                      </view>
                    </view>
                  </router-link>
                </view>
              </view>
            </u-swipe-action>
          </block>
        </view>
      </block>
      <!-- 无效商品 -->
      <block v-if="isLogin && inactiveLists.length != 0">
        <view class="disable-header">
          <span>失效商品{{ inactiveLists.length }}件</span>
          <span style="color: #dd524d" @click="handleClearAll"
            >清空失效商品</span
          >
        </view>
        <view class="goods-container">
          <block v-for="(item, index) in inactiveLists" :key="index">
            <u-swipe-action
              :index="index"
              :options="option"
              @open="handledisaactionOpen"
              @click="handledisactionClick"
              :show="activeIndex == item.id"
            >
              <!-- 商品卡片 -->
              <view class="cart-list" style="width: 100%">
                <view
                  class="cart-item bg-white flex"
                  :class="{
                    invalid:
                      item.cart_status == 1 ||
                      (item.goods.spec_type == 1 && item.goods_item.stock == 0),
                  }"
                >
                  <!-- 商品头部 -->
                  <view class="row-between flex select">
                    <u-checkbox
                      v-if="admin"
                      label-size="28rpx"
                      :active-color="themeColor"
                      v-model="item.selected"
                      @change="changeGoodsStatus(item.selected, item.id)"
                      :label-disabled="false"
                      shape="circle"
                      :disabled="
                        item.cart_status == 1 ||
                        (item.goods.spec_type == 1 &&
                          item.goods_item.stock == 0)
                      "
                    >
                    </u-checkbox>
                    <u-checkbox
                      v-else
                      label-size="28rpx"
                      :active-color="themeColor"
                      v-model="item.adminCheck"
                      :label-disabled="false"
                      shape="circle"
                      @change="adminGoodsStatus"
                    ></u-checkbox>
                  </view>
                  <!-- 商品的主内容 -->
                  <router-link
                    :to="`/pages/goods_detail/goods_detail?id=${item.goods_id}`"
                    style="width: 100%"
                  >
                    <view
                      class="flex"
                      :style="{ padding: '20rpx', width: '100%' }"
                    >
                      <view class="disable-tip">
                        <u-image
                          width="180rpx"
                          height="180rpx"
                          :src="item.goods.image"
                        />
                        <span
                          class="disable-text"
                          v-if="
                            item.goods.spec_type == 1 &&
                            item.goods_item.stock == 0
                          "
                          >库存不足</span
                        >
                        <span class="disable-text" v-else>商品下架</span>
                      </view>
                      <view class="m-l-20 disable-body" style="flex: 1">
                        <view class="line-2 nr">{{ item.goods.name }}</view>
                        <view class="row-between flex m-t-20">
                          该商品已不能购买
                        </view>
                      </view>
                    </view>
                  </router-link>
                </view>
              </view>
            </u-swipe-action>
          </block>
        </view>
      </block>
      <!-- 购物车空状态 -->
      <view
        class="cart-null bg-white m-b-20"
        style="padding: 80rpx 0 50rpx"
        v-if="isLogin && cartLists.length == 0"
      >
        <image class="img-null" src="/static/images/empty/cart.png"></image>
        <view class="muted m-b-20">购物车暂无任何商品~</view>
        <view class="br60 btn flex row-center" @tap="goShoping">去逛逛</view>
      </view>

      <!-- 是否登录的空状态 -->
      <view
        v-if="!isLogin"
        class="login column-center"
        style="padding: 200rpx 0 50rpx"
      >
        <image class="img-null" src="/static/images/empty/cart.png"></image>
        <view class="muted mt20">登录后才能查看购物车哦</view>
        <navigator class="white br60 row-center btn" url="/pages/login/login">
          <text>去登录</text>
        </navigator>
      </view>

      <!-- diy组件区 -->
      <block v-for="(item, cIndex) in pagesData" :key="cIndex">
        <template v-if="item.name == 'goodsrecom'">
          <w-goodsrecom
            v-show="item.show"
            :content="item.content"
            :styles="item.styles"
          />
        </template>
      </block>
    </view>

    <!-- 底部结算栏 -->
    <view class="footer flex bg-white">
      <!-- left -->
      <checkbox-group class="normal" v-if="admin">
        <u-checkbox
          label-size="28rpx"
          @change="changeAllSelect"
          id="checkAll"
          value="all"
          :active-color="themeColor"
          v-model="isSelectedAll"
          :label-disabled="false"
          :disabled="selectAllDisabled"
          shape="circle"
        >
          <text class="normal">全选</text>
        </u-checkbox>
      </checkbox-group>
      <checkbox-group class="normal" v-else>
        <u-checkbox
          label-size="28rpx"
          @change="adminAllSelect"
          id="checkAll"
          value="all"
          v-model="adminCheckAll"
          :active-color="themeColor"
          :label-disabled="false"
          :disabled="selectAllDisabled"
          shape="circle"
        >
          <text class="normal">全选</text>
        </u-checkbox>
      </checkbox-group>
      <!-- right -->
      <view class="all-price nr m-r-20 flex row-right">
        <block v-if="admin">
          <view>合计：</view>
          <price
            :content="total_amount || 0"
            :color="themeColor"
            mainSize="36rpx"
            minorSize="28rpx"
          ></price>
        </block>
        <block v-else>
          <view
            class="right-btn br60 white"
            :style="{
              background:
                cartLists.filter((item) => {
                  return item.adminCheck == true;
                }).length == 0
                  ? '#cfcfcf'
                  : '#dd524d',
            }"
            @click="handleAdminDel"
            >删除</view
          >
        </block>
      </view>
      <block v-if="admin">
        <view
          class="right-btn br60 white"
          v-if="getResultBtn"
          @tap="goToConfirm"
          >去结算</view
        >
        <view class="right-btn br60 lighter" style="background: #f2f2f2" v-else
          >去结算</view
        >
      </block>
    </view>

    <!-- 是否删除商品的弹窗 -->
    <u-modal
      v-model="delPopup"
      :showCancelButton="true"
      comfirm-text="狠心删除"
      :confirm-color="themeColor"
      :show-title="false"
      @confirm="goodsDelete"
    >
      <view style="padding-top: 40rpx" class="flex row-center">
        <view style="margin: 50rpx 0">确认删除该商品吗？</view>
      </view>
    </u-modal>
    <tabbar />

    <!-- 加载中 -->
    <u-mask
      :show="isChangeLoading"
      :mask-click-able="false"
      :custom-style="{ background: 'rgba(0, 0, 0, 0)' }"
    ></u-mask>
    <view class="loading" v-if="isChangeLoading">
      <u-loading size="40" :color="themeColor"></u-loading>
      <view class="white m-t-20"> 加载中... </view>
    </view>
  </view>
</template>

<script>
import {
  apiCartLists, //商品列表
  apiCartDel, //商品删除
  apiCartCountChange, //商品数量改变
  apiCartSelectChange, //选择商品
  apiCartNum, //购物车数量
  apiGetPage, //获取当前diy页面
  apiclearAll, //清空失效商品
} from "@/api/store";
import { OrderTypeEnum } from "@/utils/enum";
import { trottle } from "@/utils/tools";

export default {
  name: "ShopCart",

  data() {
    return {
      pagesData: [], //diy的组件
      total_amount: "", //合计｜｜总余额
      cartLists: [], //购物车数据
      cartListsId: [], //购物车数据的所有ID
      total_amount: "", //购物车合计金额
      delPopup: false, //是否弹出删除商品的弹窗
      cart_id: 0, //删除的购物车ID
      isSelectedAll: false, //是否全选
      isChangeLoading: false, //是否是操作请求中状态
      option: [
        {
          text: "删除",
          style: {
            backgroundColor: "#dd524d",
          },
        },
      ], //滑动组件配置
      activeIndex: -1, //滑动组件开启对应的index
      activeLists: [],
      inactiveLists: [],
      admin: true,
      adminCheckAll: false,
    };
  },

  methods: {
    //重选按钮
    handlereCheck(goods_id, cart_id) {
      this.$Router.push({
        path: `/pages/goods_detail/goods_detail?id=${goods_id}&cart_id=${cart_id}&reCheck=1`,
      });
    },

    // 获取购物车数据列表
    getCartList() {
      return apiCartLists().then((res) => {
        this.total_amount = res.total_amount;
        res.lists.forEach((item, index) => {
          res.lists[index].selected = item.selected == 1 ? true : false;
        });
        this.cartLists = res.lists;
        this.baseSelect(res.lists);
        this.$store.dispatch("getCartNum");
        this.isChangeLoading = false;
        return Promise.resolve();
      });
    },

    // 初始化商品的选中状态
    baseSelect(data) {
      this.cartListsId = [];
      const res = data.filter((el) => {
        this.cartListsId.push(el.id);
        return el.selected == false;
      });
      this.isSelectedAll = true;
      this.goodsListActive.map((item) => {
        if (!item.selected) this.isSelectedAll = false;
      });
    },

    // 商品数量的修改
    countChange({ value }, id) {
      this.isChangeLoading = true;
      apiCartCountChange({
        cart_id: id,
        goods_num: value,
      })
        .then((res) => {
          this.$store.dispatch("getCartNum");
        })
        .finally(() => {
          this.getCartList();
        });
    },

    // 弹窗拿到当前需要删除的商品购物车ID
    changeDelPopup(cart_id) {
      this.delPopup = true;
      this.cart_id = cart_id;
    },

    // 删除购物车的商品
    async goodsDelete() {
      this.isChangeLoading = true;
      await apiCartDel({
        cart_id: this.cart_id,
      });
      await this.getCartList();
      this.$toast({
        title: "删除成功",
      });
    },

    // 单选
    changeGoodsStatus(status, id) {
      this.isChangeLoading = true;
      status = status == 1 ? 0 : 1;
      apiCartSelectChange({
        cart_id: [id],
        selected: status,
      }).then((res) => {
        this.getCartList();
      });
    },
    //管理状态下单选商品
    async adminGoodsStatus() {
      console.log(this.cartLists);
      await this.$nextTick();
      const temp = this.cartLists.filter((item) => {
        return item.adminCheck == true;
      });
      if (temp.length == this.cartLists.length) {
        this.adminCheckAll = true;
      } else {
        this.adminCheckAll = false;
      }
    },
    // 全选商品
    changeAllSelect() {
      this.isChangeLoading = true;
      const status = this.isSelectedAll == true ? 0 : 1;
      const cartIDs = this.goodsListActive.map((item) => item.id);
      apiCartSelectChange({
        cart_id: cartIDs,
        selected: status,
      }).then((res) => {
        this.getCartList();
      });
    },
    //管理商品状态下全选商品
    adminAllSelect() {
      this.cartLists.forEach((i) => {
        i.adminCheck = !this.adminCheckAll;
      });
    },

    // 去购物
    goShoping() {
      this.$Router.replaceAll("/pages/index/index");
    },

    // 去结算
    goToConfirm() {
      const carts = this.cartLists
        .filter((item) => item.selected)
        .map((item) => item.id);
      if (carts.length == 0) return this.$toast({ title: "请选择商品" });
      this.$Router.push({
        path: "/pages/goods_order/goods_order",
        query: {
          from: OrderTypeEnum["GOODS"],
          payload: {
            source: "cart",
            cart_id: carts,
          },
        },
      });
    },

    // 去首页
    changeTab() {
      this.$Router.replaceAll({
        path: "/pages/index/index",
      });
    },

    getPage() {
      apiGetPage({
        type: 4,
      }).then((res) => {
        const {
          common: { title },
          common,
          content,
        } = res;
        uni.setNavigationBarTitle({
          title,
        });
        this.pagesData = content;
      });
    },
    //滑动卡片关闭其他卡片（排他）--有效商品
    handleactionOpen(index) {
      this.activeIndex = this.activeLists[index].id;
    },
    //滑动卡片关闭其他卡片（排他）--无效商品
    handledisaactionOpen(index) {
      this.activeIndex = this.inactiveLists[index].id;
    },
    //滑动卡片删除按钮处理 --有效商品
    handleactionClick(index) {
      this.changeDelPopup(this.activeLists[index].id);
    },
    //滑动卡片删除按钮处理 --无效商品
    handledisactionClick(index) {
      this.changeDelPopup(this.inactiveLists[index].id);
    },
    //清空失效商品
    async handleClearAll() {
      this.isChangeLoading = true;
      const cart_ids = this.inactiveLists.map((item) => {
        return item.id;
      });

      await apiclearAll({ cart_ids });
      this.getCartList();
    },
    //管理商品状态下删除
    async handleAdminDel() {
      this.isChangeLoading = true;
      console.log(this.cartLists);
      const temp = this.cartLists.filter((item) => {
        return item.adminCheck == true;
      });
      const cart_ids = temp.map((i) => {
        return i.id;
      });
      if (cart_ids.length == 0) {
        return (this.isChangeLoading = false);
      }
      await apiclearAll({ cart_ids });
      this.getCartList();
    },
  },
  computed: {
    cartNum() {
      return this.$store.state.cart.cartNum;
    },
    getResultBtn() {
      const carts = this.cartLists
        .filter((item) => item.selected)
        .map((item) => item.id);
      if (carts.length == 0) {
        this.isSelectedAll = false;
        return false;
      } else {
        return true;
      }
    },

    // 可售卖商品列表
    goodsListActive() {
      return (
        this.cartLists.filter(
          (item) =>
            item.cart_status == 0 &&
            item.sku_is_delete == 0 &&
            item.sku_stock_none == 0
        ) || []
      );
    },

    // 是否可全选操作
    selectAllDisabled() {
      return !!!this.goodsListActive.length;
    },
  },
  watch: {
    cartLists() {
      //添加admincheck响应式属性，用于管理状态下删除商品
      this.cartLists.forEach((item) => {
        this.$set(item, "adminCheck", false);
      });
      //过滤有效商品
      this.activeLists = this.cartLists.filter((i) => {
        return !(
          i.cart_status == 1 ||
          (i.goods.spec_type == 1 && i.goods_item.stock == 0)
        );
      });
      //过滤无效商品 单规格库存不足或者商品下架 多规格商品下架
      this.inactiveLists = this.cartLists.filter((i) => {
        return (
          i.cart_status == 1 ||
          (i.goods.spec_type == 1 && i.goods_item.stock == 0)
        );
      });
    },
  },
  async onShow() {
    // this.getCartNum()
    await this.getCartList();
    if (this.isLogin) {
      this.getPage();
    }
  },

  created() {
    this.countChange = trottle(this.countChange, 200);
  },
};
</script>
<style lang="scss">
.shop-cart {
  position: relative;
  .loading {
    position: fixed;
    left: 39vw;
    top: 35vh;
    height: 170rpx;
    width: 170rpx;
    border-radius: 20rpx;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
.main {
  padding-bottom: 100rpx;
  .cart-header {
    padding: 25rpx 20rpx;
    display: flex;
    justify-content: space-between;
  }
  .goods-container {
    margin: 0 20rpx;
    border-radius: 10rpx;
  }
  .disable-header {
    padding: 25rpx 20rpx;
    margin-top: 30rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
    display: flex;
    justify-content: space-between;
    background-color: white;
  }
  .disable-body {
    height: 160rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.cart-list {
  .cart-item {
    margin: 20rpx 20rpx 0;

    &.invalid {
      opacity: 0.7;
      // background-color: #999;
      // @include background_color();
    }
  }

  .select {
    height: 80rpx;
    // padding: 20rpx;
    // @include border_color();
    // border-style: solid;
  }
}

.cart-null {
  text-align: center;

  .btn {
    @include font_color();
    @include border_color();
    border-width: 1rpx;
    border-style: solid;
    width: 184rpx;
    margin-left: auto;
    margin-right: auto;
    padding: 8rpx 24rpx;
  }
}

.footer {
  left: 0;
  margin-bottom: 100rpx;
  bottom: calc(env(safe-area-inset-bottom));
  width: 100%;
  z-index: 20;
  height: 100rpx;
  position: fixed;
  padding: 0 24rpx;
  box-sizing: border-box;
  background-color: #ffffff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);

  .all-price {
    text-align: right;
    flex: 1;
  }

  .right-btn {
    padding: 13rpx 45rpx;
    @include background_color();
  }
}

.login {
  // height:calc(100vh - var(--window-bottom));
  background: #fff;
  text-align: center;

  .btn {
    width: 280rpx;
    line-height: 70rpx;
    margin: 40rpx auto 0;
    background-color: #09bb07;

    image {
      width: 50rpx;
      height: 50rpx;
    }
  }
}
.disable-tip {
  position: relative;
  .disable-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    color: white;
    background: rgba(0, 0, 0, 0.5);
  }
}
.change-sku {
  @include font_color();
  @include border_color();
  width: 112rpx;
  height: 52rpx;
  border-radius: 26rpx;
  border: 1px solid;
  text-align: center;
  line-height: 52rpx;
}
</style>
